<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/pages/user/myCollect.css" />
	</head>

	<body>
		<div class="loading-warpper" id="loading">
			<div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div>
		</div>
		<div id="mescroll" class="mescroll">
			<div>
				<div class="list">
					<div class="item" v-for="item in list" @click="detailClick(item)">
						<div class="item-desc">
							<span class="item-name" v-text="item.name"></span>
							<img class="item-img" :src="item.path">
						</div>
						<div class="item-inof m-t-10 font-12 font-c-7f">
							<span class="font-c-min">{{item.type | isType}}</span>
							<span>收藏时间：{{item.time | timeago}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var mescroll;
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				mescroll = new MeScroll("mescroll", {
					down: {
						auto: false,
						callback: downCallback,
						outOffsetRate: 0.01
					},
					up: {
						callback: upCallback,
						page: {
							num: 0,
							size: 10
						},
						lazyLoad: {
							use: true,
							attr: 'imgurl',
							showClass: 'mescroll-lazy-in',
							delay: 500,
							offset: 200
						},
						noMoreSize: 3,
						empty: {
							warpId: "mescroll",
							icon: "../../images/zanwu.png",
							tip: "您还没有收藏呢~",
							btntext: "",
							btnClick: null,
							supportTap: false
						},
						htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
					}
				})
			})

			window.addEventListener('collectCallback',function(){
				downCallback()
			})


			var app = new Vue({
				el: '#mescroll',
				data: {
					list: []
				},
				filters: {
					isType: function(value) {
						switch (value) {
							case 'UsedCommodity':
								return '二手商品'
								break;
								
							case 'LawHall':
								return '有偿维修'
								break;
							case 'Discovery':
								return '周边商家'
								break;
						}						
					},
					timeago: function(value) {
						return Util.timeago(value)
					}
				},
				methods: {
					detailClick: function(item) {
						var that = this;
						switch (item.type) {
							case 'UsedCommodity':
								that.haveHead('../neighbor/secondHand/details.html',item.name,item.id)
								break;
								
							case 'LawHall':
								that.noHead('../home/service/maintain-detail.html',item.name,item.id)
								break;
							case 'Discovery':
								that.noHead('../discover/detail.html',item.name,item.id)
								break;
						}	
					},
					haveHead: function (url,title,detailID) {
						mui.openWindow({
							url: url,
							id: url,
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: title, // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleColor: "#414141",
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							extras: {
								detailID: detailID,
							},
							waiting: {
								autoShow: false
							}
						})
					},
					noHead: function (url,title,detailID) {
						mui.openWindow({
							url: url,
							id: url,
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: title, // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleSize: "17px", // 字体大小,默认17px
									type: 'transparent',
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true,
									splitLine: { // 标题栏控件的底部分割线，类似borderBottom
										color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
										height: "1px" // 分割线高度,默认值为"2px"
									}
								}
							},
							extras: {
								detailID: detailID,
							},
							waiting: {
								autoShow: false
							}
						})
					}
				}
			})

			function downCallback() {
				app.list = []
				mescroll.resetUpScroll();
			}

			function upCallback(page) {
				mui.post(Util.HTTP + 'api/Users/GetMyCollecting', {
					userID: Util.getState('$state').userID,
					page: page.num,
					number: page.size
				}, function(res) {
					if (res.code == 1001) {
						console.log(res.data.length)
						mescroll.endSuccess(res.data.length);
						app.list = app.list.concat(res.data)
						document.getElementById('loading').style.display = 'none'
					} else {
						mui.toast(res.message)
					}
				})
			}
		</script>
	</body>

</html>
